<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">
<script src="{{ url_for('static', filename='js/admin.js') }}"></script>
<link rel="shortcut icon" href="{{ url_for('static', filename='image/favicon.ico') }}">

<title>BD8DUE's Web - Admin</title>
</head>
<body>

    <ul class="navbar_ul">
        <li class="navbar_li"><a class="navbar_active" href="/">主页</a></li>
        <li class="navbar_li"><a href="/blog">博客</a></li>
        <li class="navbar_li"><a href="/word">留言</a></li>
        <li class="navbar_li"><a href="https://gitee.com/cjc-cao">项目</a></li>
        <li class="navbar_li"><a href="https://space.bilibili.com/3546392284891327">B站</a></li>
        <li class="navbar_li" style="float: right;"><a href="/en/index">English</a></li>
      </ul>

    </br></br></br></br>

<h1><center><big><img src="{{ url_for('static', filename='image/favicon.ico') }}" alt=" "><div class="white_text">BD8DUE's Web - Admin</div></big></center></h1>


<div class="cards-container">
    <!-- 卡片1 -->
    <div class="foldable-card">
        <div class="card-header">
            <h1><div class="white_text">&emsp;&emsp;Blogs Manege</div></h1>
            <span class="card-icon"><div class="white_text">◀</div></span>
        </div>
        <div class="card-content">
            <div class="card-content-inner">
                <div class="container">
                    <ul>
                        {% for i in range(blog_tittle_list|length) %}
                            <div class="card blog-card">
                                <div class="blog-title-container">
                                    <a href="/blog/{{ blog_id_list[i] }}">
                                        <h2>
                                            <div class="white_text"><li>
                                                {{ blog_tittle_list[i] }} 
                                            </li></div>
                                        </h2>
                                    </a>
                                </div>
                                <div class="blog-actions">
                                    <a href="/editblog/{{ blog_id_list[i] }}">
                                        <div class="white_text">
                                            <div class="text-button">
                                                edit
                                            </div>
                                        </div>
                                    </a>

                                    <button class="text-button" id="delete" onclick="deleteBlog(id={{blog_id_list[i]}});">delete</button>
                                </div>
                            </div>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 卡片2 -->
    <div class="foldable-card">
        <div class="card-header">
            <h1><div class="white_text">&emsp;&emsp;New Blog</div></h1>
            <span class="card-icon"><div class="white_text">◀</div></span>
        </div>
        <div class="card-content">
            <div class="card-content-inner">
                <form action="/newblog" method="post">
                    <div class="white_text">
                        <center><input type="text" name="blog_tittle" style="font-size: 4em;" placeholder="Blog Tittle"></center></br>
                        <center><textarea type="text" id="blog_text" name="blog_text" style="font-size: 4em; width: 1024px; height: 400px;" placeholder="Blog Text"></textarea></center></br>
                        <h2><center>
                            <div class="white_text">
                                <button class="text-button" style="font-size: 2em;" type="submit">submit</button>
                            </div>
                        </center></h2>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 卡片3 -->
    <div class="foldable-card">
        <div class="card-header">
            <h1><div class="white_text">&emsp;&emsp;Word Manege</div></h1>
            <span class="card-icon"><div class="white_text">◀</div></span>
        </div>
        <div class="card-content">
            <div class="card-content-inner">
                <div class="container">
                    <ul>
                        {% for i in range(word_tittle_list|length) %}
                            <div class="card word-card">
                                <div class="word-title-container">
                                    <a href="/showword/{{ word_id_list[i] }}">
                                        <h2>
                                            <div class="white_text"><li>
                                                {{ word_tittle_list[i] }} 
                                            </li></div>
                                        </h2>
                                    </a>
                                </div>
                                <div class="word-actions">
                                    <button class="text-button" id="delete" onclick="deleteWord(id={{word_id_list[i]}})">delete</button>
                                </div>
                            </div>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

</br></br></br></br></br></br></br></br></br></br>

<div class="footer">
    ©2025 BD8DUE <a href="http://beian.miit.gov.cn">蜀ICP备19032024号-1</a>
</div>

<script>
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.foldable-card');
            
            cards.forEach(card => {
                const header = card.querySelector('.card-header');
                
                header.addEventListener('click', () => {
                    // 切换当前卡片状态
                    card.classList.toggle('active');
                    
                    // 关闭其他打开的卡片（可选）
                    cards.forEach(otherCard => {
                        if (otherCard !== card && otherCard.classList.contains('active')) {
                            otherCard.classList.remove('active');
                        }
                    });
                });
            });
        });
</script>

</body>
</html>